﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <script src="lib/sigma.min.js"></script>
	<script src="lib/jquery-1.9.1.js"></script>
</head>
<body>
    <div id="sigma-example" style="background-color:green; height: 400px; width: 400px;" ></div>
    <script>
		function init() {
		var sigRoot = document.getElementById('sigma-example');
		var sigInst = sigma.init(sigRoot);
		
		sigInst.drawingProperties({
			  defaultLabelColor: '#ccc',
			  font: 'Arial',
			  edgeColor: 'source',
			  defaultEdgeType: 'curve'
			}).graphProperties({
			  minNodeSize: 1,
			  maxNodeSize: 10
			});


		sigInst.addNode('hello',{
		  label: 'Hello',
		  color: '#ff0000'
		}).addNode('world',{
		  label: 'World !',
		  color: '#00ff00'
		}).addNode('1',{
		  label: 't',
		  color: '#00ff00'
		}).addNode('2',{
		  label: 't !',
		  color: '#0000ff'
		}).addEdge('1_2','t','t').draw();
		
		return;
		
		 /**
		   * First, let's instanciate sigma.js :
		   */
		  var sigInst = sigma.init($('#sigma-example')[0]).drawingProperties({
			defaultLabelColor: '#fff'
		  }).graphProperties({
			minNodeSize: 0.5,
			maxNodeSize: 5
		  });
		 
		  // (requires "sigma.parseGexf.js" to be executed)
		  sigInst.parseGexf('/data/les_miserables.gexf');
		 
		  /**
		   * Now, here is the code that shows the popup :
		   */
		  (function(){
			var popUp;
		 
			// This function is used to generate the attributes list from the node attributes.
			// Since the graph comes from GEXF, the attibutes look like:
			// [
			//   { attr: 'Lorem', val: '42' },
			//   { attr: 'Ipsum', val: 'dolores' },
			//   ...
			//   { attr: 'Sit',   val: 'amet' }
			// ]
			function attributesToString(attr) {
			  return '' +
				attr.map(function(o){
				  return '' + o.attr + ' : ' + o.val + '';
				}).join('') +
				'';
			}
		 
			function showNodeInfo(event) {
			  popUp && popUp.remove();
		 
			  var node;
			  sigInst.iterNodes(function(n){
				node = n;
			  },[event.content[0]]);
		 
			  popUp = $(
				''
			  ).append(
				// The GEXF parser stores all the attributes in an array named
				// 'attributes'. And since sigma.js does not recognize the key
				// 'attributes' (unlike the keys 'label', 'color', 'size' etc),
				// it stores it in the node 'attr' object :
				attributesToString( node['attr']['attributes'] )
			  ).attr(
				'id',
				'node-info'+sigInst.getID()
			  ).css({
				'display': 'inline-block',
				'border-radius': 3,
				'padding': 5,
				'background': '#fff',
				'color': '#000',
				'box-shadow': '0 0 4px #666',
				'position': 'absolute',
				'left': node.displayX,
				'top': node.displayY+15
			  });
		 
			  $('ul',popUp).css('margin','0 0 0 20px');
		 
			  $('#sigma-example').append(popUp);
			}
		 
			function hideNodeInfo(event) {
			  popUp && popUp.remove();
			  popUp = false;
			}
		 
			sigInst.bind('overnodes',showNodeInfo).bind('outnodes',hideNodeInfo).draw();
		  })();
		}
		 
		if (document.addEventListener) {
		  document.addEventListener('DOMContentLoaded', init, false);
		} else {
		  window.onload = init;
		}
    </script>
</body>
</html>
